<template>
  <div class="production-data-query">
    <el-card shadow="never">    
      <el-form :inline="true" :model="queryForm" label-width="120px" label-position="right">
        <el-form-item label="查询内容类型">
          <el-select v-model="queryForm.queryType" placeholder="请选择查询内容类型">
            <el-option label="PCBA检测" value="pcba"></el-option>
            <el-option label="整表流量台检测" value="wholeFlow"></el-option>
            <el-option label="整表出厂检测" value="wholeOut"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="查询字段">
          <el-select v-model="queryForm.queryField" placeholder="请选择查询字段">
            <el-option label="内条码" value="internalCode"></el-option>
            <el-option label="表号" value="meterNumber"></el-option>
            <el-option label="订单编号+客户名称" value="orderAndCustomer"></el-option>
            <el-option label="IMEI" value="imei"></el-option>
            <el-option label="IMSI" value="imsi"></el-option>
            <el-option label="ICCID" value="iccid"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item v-if="queryForm.queryField === 'internalCode' || queryForm.queryField === 'meterNumber' || queryForm.queryField === 'iccid'|| queryForm.queryField === 'imei'|| queryForm.queryField === 'imsi'" label="单个或号段">
          <el-input v-model="queryForm.rangeValue" placeholder="输入单个值或号段范围"></el-input>
        </el-form-item>
        
        <el-form-item v-if="queryForm.queryField === 'orderAndCustomer'" label="订单编号">
          <el-input v-model="queryForm.orderId" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        
        <el-form-item v-if="queryForm.queryField === 'orderAndCustomer'" label="客户名称">
          <el-input v-model="queryForm.customerName" placeholder="请输入客户名称"></el-input>
        </el-form-item>
        
        <!-- <el-form-item v-if="queryForm.queryField === 'imei' || queryForm.queryField === 'imsi'" label="单个值">
          <el-input v-model="queryForm.singleValue" placeholder="请输入单个值"></el-input>
        </el-form-item> -->
        
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      
      <el-table
        :data="tableData"
        :key="tableKey"
        v-loading="listLoading"
        :row-style="{height:40+'px'}"
        :cell-style="{padding:0+'px'}"
        height="400"
      >
        <el-table-column prop="internalCode" label="内条码"></el-table-column>
        <el-table-column prop="meterNumber" label="表号"></el-table-column>
        <el-table-column prop="orderId" label="订单编号"></el-table-column>
        <el-table-column prop="customerName" label="客户名称"></el-table-column>
        <el-table-column prop="imei" label="IMEI"></el-table-column>
        <el-table-column prop="imsi" label="IMSI"></el-table-column>
        <el-table-column prop="iccid" label="ICCID"></el-table-column>
        <el-table-column prop="testType" label="检测类型"></el-table-column>
        <el-table-column prop="testTime" label="检测时间"></el-table-column>
        <el-table-column prop="testResult" label="检测结果">
          <template slot-scope="scope">
            <el-tag :type="scope.row.testResult === '成功' ? 'success' : 'danger'">
              {{ scope.row.testResult }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- <el-pagination
        v-if="total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> -->
      <pagination v-show="total>0" :total="total"  :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ProductionDataQuery',
  data() {
    return {
      listLoading:false,
      listQuery:{
        username:'',
        mobile:'',
        page:1,
        status:-1,
        pageSize:20
      },
      queryForm: {
        queryType: 'pcba',
        queryField: 'internalCode',
        rangeValue: '',
        orderId: '',
        customerName: '',
        singleValue: '',
        page: 1,
        pageSize: 10
      },
      tableData: [
        {
          internalCode: 'IN1234567890',
          meterNumber: 'M12345678',
          orderId: 'ORDER20230001',
          customerName: '客户A',
          imei: '86250205356565',
          imsi: '460011234567890',
          iccid: '89860014235678901234',
          testType: 'PCBA检测',
          testTime: '2023-11-01 10:30:45',
          testResult: '成功'
        },
        {
          internalCode: 'IN1234567891',
          meterNumber: 'M12345679',
          orderId: 'ORDER20230002',
          customerName: '客户B',
          imei: '86250205356566',
          imsi: '460011234567891',
          iccid: '89860014235678901235',
          testType: '整表流量台检测',
          testTime: '2023-11-01 10:35:45',
          testResult: '失败'
        },
        {
          internalCode: 'IN1234567892',
          meterNumber: 'M12345680',
          orderId: 'ORDER20230003',
          customerName: '客户C',
          imei: '86250205356567',
          imsi: '460011234567892',
          iccid: '89860014235678901236',
          testType: '整表出厂检测',
          testTime: '2023-11-01 10:40:45',
          testResult: '成功'
        }
      ],
      total: 3,
      currentPage: 1,
      pageSize: 10
    };
  },
  methods: {
    handleQuery() {
      // 模拟查询操作，可以根据 queryForm 的值筛选 tableData
      this.currentPage = 1;
      this.filterData();
    },
    resetForm() {
      this.queryForm = {
        queryType: 'pcba',
        queryField: 'internalCode',
        rangeValue: '',
        orderId: '',
        customerName: '',
        singleValue: '',
        page: 1,
        pageSize: 10
      };
      this.fetchData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.filterData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.filterData();
    },
    filterData() {
      // 模拟分页
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.tableData = this.fullTableData.slice(start, end);
    },
    fetchData() {
      // 模拟获取数据
      this.fullTableData = [
        {
          internalCode: 'IN1234567890',
          meterNumber: 'M12345678',
          orderId: 'ORDER20230001',
          customerName: '客户A',
          imei: '86250205356565',
          imsi: '460011234567890',
          iccid: '89860014235678901234',
          testType: 'PCBA检测',
          testTime: '2023-11-01 10:30:45',
          testResult: '成功'
        },
        {
          internalCode: 'IN1234567891',
          meterNumber: 'M12345679',
          orderId: 'ORDER20230002',
          customerName: '客户B',
          imei: '86250205356566',
          imsi: '460011234567891',
          iccid: '89860014235678901235',
          testType: '整表流量台检测',
          testTime: '2023-11-01 10:35:45',
          testResult: '失败'
        },
        {
          internalCode: 'IN1234567892',
          meterNumber: 'M12345680',
          orderId: 'ORDER20230003',
          customerName: '客户C',
          imei: '86250205356567',
          imsi: '460011234567892',
          iccid: '89860014235678901236',
          testType: '整表出厂检测',
          testTime: '2023-11-01 10:40:45',
          testResult: '成功'
        }
      ];
      this.total = this.fullTableData.length;
      this.filterData();
    }
  },
  mounted() {
    this.fullTableData = this.tableData;
    this.filterData();
  }
};
</script>

<style scoped>
.production-data-query {
  padding: 20px;
}

.empty-data {
  text-align: center;
  padding: 60px 0;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>